<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="../static/css/DataView.css">-->
    <link rel="stylesheet" href="../static/css/myHtml.css">
    <script language="JavaScript" type="text/javascript" src="../static/js/axios.min.js" ></script>
    <script language="JavaScript" type="text/javascript" src="../static/js/jquery-1.7.2.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script language="JavaScript" type="text/javascript" src="../static/js/vue.js"></script>
    <script language="JavaScript" type="text/javascript" src="../static/js/echarts5.2.1.min.js"></script>
    <script language="JavaScript" type="text/javascript" src="../static/js/myHtml.js"></script>

</head>
<body>

<div id="system">


    <span style="font-family: 楷体;font-size: 30px;font-weight: bold;display: block;text-align: center;">
            FOX</span>
    <hr />
    <div class="dataShow">

        <span style="font-family: 幼圆;font-size: 15px;">
            数据更新时间:{{update_data}}</span>
        <!--数据展示1-->
        <div class="dataShow1">

            <!--具体模块展示-->
            <div class="dataShow2">
                <div class="dataShow3 card:hover box-shadow">
                    <div class="dataShow3part">图标</div>
                    <div >
                        <div class="dataShow4">
                            当前温度:
                        </div>
                        <div class="dataShow5">
                            {{}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="dataShow2">
                <div class="dataShow3 card:hover box-shadow">
                    <div class="dataShow3part">图标</div>
                    <div >
                        <div class="dataShow4">
                            当前温度:{{}}
                        </div>
                        <hr />
                        <div class="dataShow5" style="font-size: 17px;padding-left: 120px;padding-top: 12px">
                            阈值：
                        </div>
                    </div>
                </div>
            </div>
            <div class="dataShow2">
                <div class="dataShow3 card:hover box-shadow">
                    <div class="dataShow3part">图标</div>
                    <div >
                        <div class="dataShow4">
                            当前温度:{{}}
                        </div>
                        <hr />
                        <div class="dataShow5" style="font-size: 17px;padding-left: 120px;padding-top: 3px">
                            阈值1：
                        </div>
                        <div class="dataShow5" style="font-size: 17px;padding-left: 120px;padding-top: 10px">
                            阈值2：
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr />
        <!--数据展示2-->
        <div class="dataShow1">
            <!--具体模块展示-->
            <div class="dataShow2">
                <div class="dataShow3" style="width: 200px;height: 80px">
                    <div class="dataShow3part" style="width: 50px;height: 80px;">图标</div>
                    <div >
                        <div class="dataShow4" style="padding-top: 13px;padding-left: 60px;font-size: 17px">
                            当前检测器状态:
                        </div>
                        <div class="dataShow5" style="padding-top: 15px;padding-left: 90px">
                            {{}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="dataShow2">
                <div class="dataShow3 " style="width: 200px;height: 80px">
                    <div class="dataShow3part" style="width: 50px;height: 80px;">图标</div>
                    <div >
                        <div class="dataShow4" style="padding-top: 13px;padding-left: 60px;font-size: 17px">
                            当前检测器状态:
                        </div>
                        <div class="dataShow5" style="padding-top: 15px;padding-left: 90px">
                            {{}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="dataShow2">
                <div class="dataShow3 " style="width: 200px;height: 80px">
                    <div class="dataShow3part" style="width: 50px;height: 80px;">图标</div>
                    <div >
                        <div class="dataShow4" style="padding-top: 13px;padding-left: 60px;font-size: 17px">
                            当前检测器状态:
                        </div>
                        <div class="dataShow5" style="padding-top: 15px;padding-left: 90px">
                            {{}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="dataShow2">
                <div class="dataShow3 " style="width: 200px;height: 80px">
                    <div class="dataShow3part" style="width: 50px;height: 80px;">图标</div>
                    <div >
                        <div class="dataShow4" style="padding-top: 13px;padding-left: 60px;font-size: 17px">
                            当前检测器状态:
                        </div>
                        <div class="dataShow5" style="padding-top: 15px;padding-left: 90px">
                            {{}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="dataShow2">
                <div class="dataShow3 " style="width: 200px;height: 80px">
                    <div class="dataShow3part" style="width: 50px;height: 80px;">图标</div>
                    <div >
                        <div class="dataShow4" style="padding-top: 13px;padding-left: 60px;font-size: 17px">
                            当前检测器状态:
                        </div>
                        <div class="dataShow5" style="padding-top: 15px;padding-left: 90px">
                            {{}}
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <hr />
        <!--折线图-->
        <div class="dataShow1">
            <div class="dataShow2">
                <div id="1" class="dataShow3" style="background-color: #528cee;width: 560px;height: 400px">

                </div>
            </div>
            <div class="dataShow2">
                <div id="2" class="dataShow3" style="background-color: #528cee;width: 560px;height: 400px">

                </div>
            </div>


        </div>
        <hr />
        <!--数据查询-->
        <div class="selectShow1">
            <div style=" width: 800px;background-color: white;text-align: center;border-radius: 10px; margin: 0 30px 0 0">
                <a style="font-size: 18px;font-weight: bold;">信息查询</a>
                <div class="dataShow3 operate3" style="background-color: #528cee;width: 800px;height: 70px">


                    <form>
                        <div>
                            传感器类型：
                            <select v-model="select_condition">
                                <option value="温度">温度</option>
                                <option value="湿度">湿度</option>
                                <option value="光照强度">光照强度</option>
                            </select>
                        </div>
                    </form>
                    <button class="operateButton" type="button" @click="SelectDataByCondition">查询</button>

                </div>

                <span style="font-size: 18px;font-weight: bold">查询结果</span>
                <table>
                    <thead>
                        <tr>
                            <td>数据</td>
                            <td>时间</td>
                        </tr>
                    </thead>
                    <tbody >
                        <tr v-for="monitorData in part_data_list">
                            <td>{{monitorData.agData}}&#8451</td>
                            <td>{{monitorData.agTime}}</td>
                        </tr>
                    </tbody>
                </table>
                <div id="foot">
                    <button @click="dataByPageNum(1)">首页</button>
                    <button @click="dataByPageNum(current_page_number-1)">上一页</button>
                    当前在第:&nbsp;<label id="nowPage">{{current_page_number}}</label>&nbsp;页&nbsp;&nbsp;
                    <button @click="dataByPageNum(current_page_number+1)">下一页</button>
                    <button @click="dataByPageNum(pageCount)">尾页</button>
                    共:&nbsp;<label id="totalPage">{{pageCount}}</label>&nbsp;页&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </div>

        </div>

    </div>
    <!--操作-->
    <div class="operate">
        <div style="display: flex;justify-content: center;align-items: center;height: 50px;border-radius: 5px;background-color: #528cee;text-align: center;font-family: 幼圆;font-size: 25px;">手动操作</div>
        <div class="operate1">
            <div class="operate2">
                <div class="dataShow3 operate3">
                    模式：
                    <input type="checkbox" class="switch" v-model="on_off_operate">
                </div>
            </div>
            <hr />

            <div class="operate2">
                <div class="dataShow3 operate3" style="height: 90px">
                    模式：
                    <form>
                        <input type="radio" name="value" v-model="radio_operate" value="打开">打开
                        <input type="radio" name="value" v-model="radio_operate" value="关闭">关闭
                    </form>
                    &nbsp;<button class="operateButton" type="button" @click="multi_input_update">确定</button>
                </div>
            </div>
            <hr />

            <div class="operate2">
                <div class="dataShow3 operate3">
                    模式：
                    <select class="multiSelect" v-model="multi_check_operate">
                        <option value="温度">温度</option>
                        <option value="湿度">湿度</option>
                        <option value="光照强度">光照强度</option>
                    </select>
                    &nbsp;<button class="operateButton" type="button" @click="multi_input_update">确定</button>

                </div>
            </div>
            <hr />

            <div class="operate2">
                <div class="dataShow3 operate3">
                    <form>
                        阈值：<input class="operateInput" type="text" style="width: 80px;height: 26px" v-model="single_input_operate">
                    </form>
                    &nbsp;<button class="operateButton" type="button" @click="single_input_update">确定</button>
                </div>
            </div>
            <hr />

            <div class="operate2">
                <div class="dataShow3 operate3" style="height: 80px">
                    <form>
                        值1：<input class="operateInput" type="text" style="width: 80px;height: 26px" v-model="multi_input_operate1">
                        <br/>
                        值2：<input class="operateInput" type="text" style="width: 80px;height: 26px" v-model="multi_input_operate2">
                    </form>
                    &nbsp;<button class="operateButton" type="button" @click="multi_input_update">确定</button>
                </div>
            </div>
            <hr />

        </div>
    </div>
</div>


</body>
</html>